<div class="e-contract-list">
  <div class="contract-content">
    <div class="content-list">
      <nz-table #borderedTable nzSize="small" [nzData]="dataSet" [nzShowPagination]="false" [nzLoading]="nzLoading">
        <thead>
          <tr>
            <th>序号</th>
            <th *ngFor="let colName of colNames">{{ colName }}</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of dataSet; let i = index">
            <td>{{ i + 1 }}</td>
            <td>{{ data.taskName }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.taskTime }}</td>
            <td>{{ data.state }}</td>
            <td>
              <a (click)="viewContract(data)">查看合同</a>&nbsp;&nbsp;
              <a (click)="signContract(data)">签署</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="content-list-pagination">
        <ng-template #totalTemplate let-total>共 {{ nzTotal }} 条</ng-template>
        <nz-pagination 
          [nzShowTotal]="totalTemplate" 
          nzShowSizeChanger 
          [nzPageSizeOptions]="pageSizeOptions"
          [nzTotal]="nzTotal"
          [(nzPageSize)]="nzPageSize"
          [(nzPageIndex)]="nzPageIndex"
          (nzPageSizeChange)="nzPageSizeChange()"
          (nzPageIndexChange)="nzPageIndexChange()"
        ></nz-pagination>
      </div>
    </div>
  </div>

  <nz-modal
    [(nzVisible)]="modalIsVisible" 
    nzTitle="查看合同" 
    (nzOnCancel)="modalHandleCancel()" 
    (nzOnOk)="modalHandleOk()"
    [nzOkText]="'确定'"
    [nzContent]="modalContent"
    [nzWidth]="800"
    [style]="{ top: 16 }"
    [nzCancelText]="null"
  >

  </nz-modal>
  <ng-template #modalContent>
    <nz-spin [nzTip]="'等待中。。。'" [nzSize]="'large'" [nzSpinning]="nzSpinning">
      <div id="pdfpreview" class="modal-content" style="height: 420px;">
      </div>
    </nz-spin>
  </ng-template>

  <nz-modal
    [(nzVisible)]="signModalIsVisible" 
    (nzOnCancel)="signModalHandleCancel()"
    [nzContent]="signModalContent"
    [nzWidth]="279"
    [nzFooter]="null"
  >

  </nz-modal>
  <ng-template #signModalContent>
    <nz-spin [nzTip]="'等待中。。。'" [nzSize]="'large'" [nzSpinning]="signSpinning">
      <div class="sign-qrcode" 
        style="display: flex;align-items: center;justify-content: center; width: 207px;height: 207px; margin: auto;background: url(assets/images/me/qr-code.png) no-repeat;">
        <img *ngIf="qrCode" width="200" height="200" [src]="'data:image/png;base64,' + qrCode" alt="">
        <p class="PingFangSC-Regular-14-65" *ngIf="qrCodeStatus===2"><a><i nz-icon nzType="sync" nzTheme="outline"></i> 重新获取</a></p>
      </div>
    </nz-spin>
    <p style="margin: 8px 0 0 0;text-align: center;" class="PingFangSC-Regular-14-65">使用 微信 扫描二维码开始签署</p>
  </ng-template>

</div>
